  <template>
  <div class="home">
    <!-- 头部 -->
    <myheader></myheader>
    <!-- 图片 添加文章 -->
    <div class="img">
      <img  class="nav-image" src="@/assets/1.png" alt="" />
      <p class="fllow-you">随心写作，自由表达</p>
      <el-button type="primary" @click="$router.push('/create')">开始写文章</el-button>
    </div>
    <!-- 发现精彩 -->
    <div class="list">
      <h3 class="”columns-title“" style="margin: 20px 0">发现精彩</h3>
      <ul>
        <li v-for="item in state.list" :key="item._id">
          <!-- <img :src="item.avatar.url" alt="" /> -->
          <img :src="item.avatar.url" alt="">
          <p>{{ item.title }}</p>
          <p class="disc">{{ item.description }}</p>
          <el-button class="btn" type="primary" plain @click="events(item)"
            >进入专题</el-button
          >
        </li>
      </ul>
       <el-button class="addload" type="info" @click="addload" plain v-show="$store.state.flag">加载更多</el-button>
    </div>
     <!-- <el-button
      type="primary"
      v-if="canLoadMore"
      plain
      class="load-more"
      @click="getList('loadmore')"
      >加载更多</el-button
    > -->
  </div>
</template>
<script lang='ts' setup>
import myheader from '@/components/MyHeader'
import { columnslist } from "@/utils/api";
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
const select = ref("你好");
let { push } = useRouter();
const state = reactive({
  params: {
    currentPage: 1,
    pageSize: 6,
  },
  form: {},
  list: [],
  names:'' //请求的数组列表
});
columnslist(state.params).then((res) => {
  console.log(res);
  state.list = res.data.list;
  // console.log(state.list);
});
//事件
let events = (item: any) => {
  // console.log(item);
   console.log(item._id)
   
  push({
    path: "/detail",
    query: {
      id:item._id
    },
  });
};
</script>
<style lang="scss" scoped>

.img {
  width: 300px;
  height: 280px;
  margin: 10px auto 0;
  text-align: center;
  .nav-image{
  width: 200px !important;
  height: auto;
}
}
.list {
  width: 1200px;
  margin: 0 auto 0;
  // background-color: #ccc;
  p {
    text-align: center;
  }
}
ul {
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    border-radius: 5px;
    box-shadow: 0px 0px 20px #ccc;
    margin: 15px;
    width: 350px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    .disc {
      text-align: left !important;
      margin: 5px 0;
    }
    .btn {
      margin: 10px 0;
    }
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>


